<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    <!-- 基本结构 -->
    <div class="container mt-5">
        <div id="app">
            <todo-list></todo-list>
        </div>
    </div>


    <!-- 模板 -->
    <!-- todoList -->
    <template id="todoList">
        <!-- 模板组件只能有一个根元素，即#todoList下只能有一个子元素，所以这里另起一个.todolist把form、content、h2包裹起来 -->
        <div class="todolist">
            <h2 class="text-center">TodoList</h2>
            <todo-form v-on:add="tdf_add"></todo-form>
            <todo-content v-bind:todolist="todolist"></todo-content>
        </div>
    </template>
    <!-- todoForm -->
    <template id="todoForm">
        <div class="input-group mb-3">
            <!-- 设置ref属性 -->
            <!-- 给输入框绑定键盘事件 -->
            <input type="text" class="form-control" placeholder="Please Enter the event you are going to do" v-model="todoEvent" ref='input_info' v-on:keyup.enter='addItem'>
            <div class="input-group-append" v-on:click="addItem">
                <button class="btn btn-outline-secondary" type="button" id="button-addon2">Submit</button>
            </div>
        </div>
    </template>
    <!-- todoContent -->
    <template id="todoContent">
        <table class="table table-hover table-dark">
            <thead>
                <tr>
                    <th scope="col" width='10%'>ID</th>
                    <th scope="col" >Event</th>
                    <th scope="col" width='20%'>IsDone</th>
                    <th scope="col" width='20%'>Handle</th>
                </tr>
            </thead>
            <tbody>
                <!-- <todo-item></todo-item> -->
                <!-- tr这种特殊标签需要其他方法进行设置 -->
                <!-- todoContent拿到数据后进行数据渲染 -->
                <tr is='todoItem' v-for="item,idx in todolist" :item="item" :idx="idx"></tr>
            </tbody>
        </table>
    </template>
    <!-- todoItem -->
    <template id="todoItem">
        <tr>
            <th scope="row">{{idx+1}}</th>
            <td>{{item.title}}</td>
            <td>
                <!-- 完成与否按钮 -->
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input">
                    <label class="custom-control-label">{{item.Done?"Done":"Undone"}}</label>
                </div>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-danger">delete</button>
                </div>
            </td>
        </tr>
    </template>

    <script src="./js/vue.js"></script>
    <script>
        /* 
            1.组件化分析
                * 整个页面视为一个整体，即todoList
                    + 上半部分输入框todoForm
                    + 下半部分表单内容todoContent
                        - tbody里的每一条数据todoItem
            2.组件通讯
                * 父传子(子组件接收到的数据都会写入到组件实例下的属性)
                    + todoList把数据传递给todoContent渲染，即在todo-content标签设置属性绑定，来传递todoList的数据
                    + todoContent在自身实例下设置props属性接收数据
                    + todoContent获取到数据到传递给todoItem
                    + todoItem设置props属性接收数据item和idx
                * 子传父(遵循谁的数据谁修改的原则)
                    + 

        */


        // 4.todoItem
        const todoItem = {
            // 模板
            template:"#todoItem",
            props:['item','idx'],
            methods:{
                removeItem(idx){
                    this.$emit('tdi_remove',idx);
                }
            }
        }


        // 3.1 todoForm
        const todoForm = {
            // 模板
            template:'#todoForm',
            methods:{
                addItem(){
                    this.$emit('add',this.todoEvent);
                    this.todoEvent = '';
                    this.$refs.input_info.focus();
                }
            },
            data(){
                return {
                    todoEvent:''
                }
            }

        }

        // 3.2 todoContent
        const todoContent = {
            // 模板
            template:'#todoContent',
            // 注册局部组件
            components:{
                todoItem
            },
            // 接收todoList传递过来的数据，并在上面模板进行数据渲染
            props:['todolist']
        }


        // 2.todoList
        const todoList = {
            // 模板
            template:"#todoList",
            // 数据
            data(){
                return{
                    name:'todoList',
                    todolist:[
                        {
                            id: 1,
                            title: '实现个小目标，月薪过万',
                            done: false, // 是否完成
                            addtime: Date.now()
                        },
                        {
                            id: 2,
                            title: '实现第二个小目标，赚他一个亿',
                            done: false,
                            addtime: Date.now() + 100
                        },
                        {
                            id: 3,
                            title: '迎娶白富美，达到疯癫状态',
                            done: false,
                            addtime: Date.now() + 100
                        }
                    ]
                }
            },
            // 注册局部组件：todoForm、todoContent
            components:{
                todoForm,
                todoContent
            },
            methods:{
                tdf_add(title){
                    if(!title.trim()){
                        alert('Please enter a non-empty to-do event!');
                        return
                    }
                    const data = {
                        id:this.todolist.length+1,
                        title,
                        done:false
                    }
                    this.todolist.unshift(data);
                }
            }

        }

        // 1.创建vue实例
        var vm = new Vue({
            el:'#app',
            // 局部组件todoList
            components:{
                todoList
            }
        })
    </script>
</body>
</html>